Canvas Zooming And Panning #437
Conversation
|
|
|
|
||
| void main(void) | ||
| { | ||
| gl_Position = vec4(aVertexPosition, 0.0, 1.0); | ||
|
|
||
| gl_Position = vec4((aVertexPosition * uScale) + uTranslation, 0.0, 1.0); |
There was a problem hiding this comment.
I see this is a tough one! The translation within webGL is mathematically tough!
What about... would it work to do the panning outside of the image processing flow -- like, after it's been rendered, could we pan around a really large HTML element? Would that be easier? Could we use something like this library to do that? (it uses CSS i believe?)
https://cmorillas.github.io/panzoom/
What do you think? Can you tell us a bit more about what the issues are that you're trying to solve in the panning? What specifically makes you feel it's not working well, or what do you imagine it to be if it were working well?
There was a problem hiding this comment.
Thank you @jywarren. Attributing mouse coordinates to the WebGL texture was a headache. The https://cmorillas.github.io/panzoom/ is a life saver. Thank you!
Test Case: Implementation of Canvas Zooming and Panning
found at https://stephaniequintana.github.io/infragram/index3.html
6a2bfb7c-c820-41fc-bf73-7812fae0029f.mp4
TODO
Fixes #418
Hello @jywarren @cesswairimu @TildaDares @stephaniequintana .
Another milestone has been achieved. The zooming works fine but the panning experience is horrible. I can't seem to understand the flow of moue events. Please does any one know of a website where ,panning of Webgl canvas has been implemented ? I need to get a feel of the panning experience so that ours(infragram) can be improved. Here is a link to the current implementation at https://stephaniequintana.github.io/infragram/index3.html . Thank you. Please I am also relying on your feed backs for improvements.
Thank you!